<template>
  <el-carousel :interval="300000"  arrow="always" height="360px">
    <el-carousel-item v-for="(item, index) in banners" :key="index">
      <a :href="item.url" target="_blank" class="in-o" @click.prevent="handleClick(item.url)">
        <img :src="item.pic" :alt="item.alt" />
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { onMounted, defineProps } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
  banners: {
    type: Array,
    required: true
  }
});

const handleClick = (url) => {
  try {
    // 创建URL对象解析链接
    const urlObj = new URL(url);
    // 获取URL中的id参数
    const id = urlObj.searchParams.get('id');
    
    if (id) {
      // 跳转到文章详情页
      router.push(`/aricleDetail/${id}`);
    } else {
      console.error('URL中未找到id参数');
    }
  } catch (error) {
    console.error('URL解析错误:', error);
  }
};
</script>

<style scoped lang="scss">
.el-carousel {
  width: 100%;
}
.in-o{
  display:inline-block;
  width:100%;
  height:100%;
  border-radius:8px;
  overflow:hidden
}
:deep(.el-carousel__container){
  border-radius:8px;
  overflow:hidden;
}
.el-carousel__item {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>